<template>
	<view class="imgDetail">
		<view class="imgHead">
				<view class="img_author">
					<view class="author_img">
						<image :src="author.user.avatar" mode="aspectFill"></image>
					</view>
					
					<view class="author_text">
						<view>
							{{author.user.name}}
						</view>
						<view class="pubilc_time">
							{{author.fromTime}}
						</view>
					</view>
				</view>
				<view class="big_img" @touchstart="handleStart" @touchend="handleEnd">
					<image :src="author.thumb" mode="aspectFill"></image>
				</view>
				<view class="imgIndex">
					{{imgData.imgIndex + 1}} / {{imgData.imgList.length}}
				</view>
				<view class="zan">
					<view class="zan_left">
						<view class="iconfont icon-zan">
						</view>
						<text>
							{{author.rank}}
						</text>
					</view>
					<view class="zan_right">
						<view class="iconfont icon-xinaixin">
						</view>
						<text>
							收藏
						</text>
					</view>
				</view>
		</view>
		<view class="imgConten">
			<view class="albunMsg">
				 <view class="title">
				 	相关
				 </view>
				 <view class="body">
						<view class="abnummsg">
								<view class="abnumImg">
									<image :src="commentData.album[0].cover" mode="aspectFill" ></image>
								</view>
								<view class="abnum_right">
									<view class="button">
										专辑
									</view>
									<view class="abnumTxt">
										<text>{{commentData.album[0].name}}</text>
										<view class="iconfont icon-arrow-right">
											
										</view>
									</view>
								</view>
						
						</view>
				 </view>
			</view>
			<view class="hot" v-if="commentData.hot.length">
					<view class="hot_title">
							<text class="iconfont icon-huo1">
								
							</text>
							<text>
								热门评论
							</text>
					</view>
					<view class="hot_body">
						<view class="hot_source" v-for="(item,index) in commentData.hot"  :key="index">
							<view class="hot_avater">
								<image :src="item.user.avatar" mode="aspectFill"></image>
							</view>
							<view class="hot_msg">
								<view class="name">
									{{item.user.name}}
								</view>
								<view class="time">
									{{item.time}}
								</view>
								<view class="desc">
									{{item.content}}
								</view>
								<view class="rank">
									<text class="iconfont icon-zan">
										
									</text>
									<text>
										{{item.size}}
									</text>
								</view>
							</view>
						</view>		
					</view>
			</view>
			<view class="new">
				<view class="new_title">
						<text class="iconfont icon-liuyan">
						</text>
						<text>
							最新评论
						</text>
				</view>
				<view class="new_body"  v-if="commentData.comment.length">
					<view class="new_source" v-for="(item,index) in commentData.comment" :key="index">
						<view class="new_avater">
							<image :src="item.user.avatar" mode="aspectFill"></image>
						</view>
						<view class="new_msg">
							<view class="name">
								{{item.user.name}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
							<view class="desc">
								{{item.content}}
							</view>
							<view class="rank">
								<text class="iconfont icon-zan">
								</text>
								<text>
									{{item.user.following}}
								</text>
							</view>
						</view>
					</view>
				
				</view>
				<view class="lost" v-else>
					暂无评论哦，快去留个脚印吧~
				</view>
			</view>
		</view>
		<view class="download" @click="downloadImg">
			下载图片
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	moment.locale("zh-cn");
	export default{
		data(){
			return{
				imgData:{
					imgIndex:-1,
					imgList:[]
				},
				// 作者信息
				author:{},
				// 评论数据
				commentData:{},
				// 滑动开始数据
				touchX:'',
				touchY:'',
				touchTime:''
			}
		},
		onLoad() {
			this.imgData= getApp().globalData
			this.author = this.imgData.imgList[this.imgData.imgIndex]
			console.log(this.author)
			this.author.fromTime = moment(this.author.atime*1000).fromNow();
			this.getMsg()
		},
		methods:{
			// 获取初始数据
			getMsg(){
				this.request({
					url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${this.author.id}/comment`
				})
				.then( res => {
					this.commentData = res.data.res
						this.commentData.hot.map(item => {
							item.time = moment(item.atime*1000).fromNow()
						})
						this.commentData.comment.map(item => {
							item.time = moment(item.atime*1000).fromNow()
						})
					console.log(this.commentData,'=====')
				})
			},
			// 滑动开始事件
			handleStart(event){
				this.touchX = event.touches[0].clientX
				this.touchY = event.touches[0].clientY
				this.touchTime = Date.now()
				console.log(this.imgData,'开始')
			},
			// 滑动结束事件
			handleEnd(event){
				let X =  event.changedTouches[0].clientX - this.touchX
				let Y=  event.changedTouches[0].clientY - this.touchY
				let time = Date.now() - this.touchTime
				if(X>-150 && X<150){
					return
				}
				// 如果滑动时间超过三秒则不生效
				if(time > 3000){
					return 
				}
				// x<0,向左滑动,x>0,向右滑动
				if(X  < 0){
					this.imgData.imgIndex =this.imgData.imgIndex -1
					if(this.imgData.imgIndex <0){
						this.imgData.imgIndex = this.imgData.imgList.length -1
					}
				}else{
					this.imgData.imgIndex =this.imgData.imgIndex + 1
					if(this.imgData.imgIndex > this.imgData.imgList.length - 1){
						this.imgData.imgIndex = 0
					}
				}
				this.author = this.imgData.imgList[this.imgData.imgIndex]
				this.author.fromTime = moment(this.author.atime*1000).fromNow();
				this.getMsg()
			},
			//下载图片
			async downloadImg(){
				let newUrl = ""
				// 拿到图片在小程序中的临时路径
				const res1 = await uni.downloadFile({
					url:this.author.thumb
				})
				newUrl = res1[1].tempFilePath
				// 将小程序中的临时路径然后下载都本地中
				console.log(newUrl)
				uni.saveImageToPhotosAlbum({
					filePath:newUrl
				})
				.then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgDetail{
		.imgHead{
			position: relative;
			.img_author{
				position: relative;
				margin: 50rpx 0 0 20rpx;
				.author_img{
					display: inline-block;
					margin-right: 15rpx;
					image{
						width: 80rpx !important;
						height: 80rpx !important;
						border-radius: 50%;
						vertical-align: top;
					}
					
				}
				.author_text{
					position: absolute;
					top: 0rpx;
					left: 100rpx;
					view{
						font-weight: 600;
						color: #000;
						font-size: 30rpx;
					}
					.pubilc_time{
						color:#CCCCCC;
					}
				}
				
			}
		.big_img{
			margin-top: 15rpx;
			image{
				height: 480rpx !important; 
				width: 100%;
			}
		}
		.zan{
			display: flex;
			justify-content: space-around;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 3rpx solid #ccc;
			.zan_left{
				text-align: center;
				.icon-zan{
					font-size: 50rpx;
					display:inline-block;
					margin-right: 15rpx;
				}
			}
			.zan_right{
				.icon-xinaixin{
					font-size: 42rpx;
					display:inline-block;
					margin-right: 15rpx;
				}
				text-align: center;
			}
		}
		}
		.imgConten{
			.albunMsg{
				border-bottom: 5rpx solid #ccc;
				padding: 10rpx;
				.title{
					font-size: 36rpx;
					font-weight: 700;
				}
				.body{
					.abnummsg{
						display: flex;
						justify-content: space-around;
						.abnumImg{
							flex: 1;
							padding: 10rpx;
							padding-top: 0;
							margin-right: 15rpx;
							image{
								width: 250rpx;
								height: 250rpx;
							}
						}
						.abnum_right{
							flex: 2;
							.abnumTxt{
								padding: 0 10rpx;
								overflow: hidden;
								margin-top: 50rpx;
								position: relative;
								text{
									font-weight: 600;
									font-size: 32rpx;
									color: #000;
								}
								view{
									position: absolute;
									top:0;
									right: 0;
									font-size: 44rpx;
									font-weight: 700;
								}
							}
							.button{
								width:90rpx;
								height: 30rpx;
								color: #fff;
								line-height: 30rpx;
								text-align: center;
								border-radius: 5%;
								padding: 10rpx;
								background-color: $color;
							}
						}
				
					}
				}
			}
			.hot{
				.hot_title{
					margin: 10rpx;
					text{
						font-size: 36rpx;
						font-weight: 700;
					}
					.icon-huo1{
						margin-right: 10rpx;
						color:red;
						font-size: 44rpx;
					}
				}
				.hot_body{
					.hot_source{
						display: flex;
						justify-content: space-around;
						margin-left: 10rpx;
						border-bottom: 5rpx solid #ccc;
						.hot_avater{
							flex: 3;
							image{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.hot_msg{
							flex: 9;
							font-size: 32rpx;
							.desc{
								font-weight: 700;
								color: #000;
								margin-top: 65rpx;
							}
							.rank{
								font-size: 32rpx;
								margin-left: 78%;
								.iconfont{
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			
			}
			.new{
				margin-top:20rpx ;
				margin-bottom: 120rpx;
				.new_title{
					margin: 10rpx;
					text{
						font-size: 36rpx;
						font-weight: 700;
					}
					.icon-liuyan{
						margin-right: 10rpx;
						color:#2AAEE2;
						font-size: 44rpx;
					}
				}
				.new_body{
					margin-top: 10rpx;
					.new_source{
						display: flex;
						justify-content: space-around;
						margin-left: 10rpx;
						border-bottom: 6rpx solid #ccc;
						.new_avater{
							flex: 3;
							image{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.new_msg{
							flex: 9;
							font-size: 32rpx;
							padding: 10rpx 0;
							.desc{
								font-weight: 700;
								color: #000;
								margin-top: 35rpx;
							}
							.time{
								font-size: 26rpx;
								}
							.rank{
								font-size: 32rpx;
								margin-left: 78%;
								.iconfont{
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}
		}
		.lost{
			height: 200rpx;
			font-size: 40rpx;
			text-align: center;
			line-height: 200rpx;
		}
		.imgIndex{
			color: #fff;
			width: 100%;
			text-align: center;
			background-color: rgba(0,0,0,.2);
			position: absolute;
			top: 510rpx;
			left: 0;
			font-size: 45rpx;
		}
		.download{
			color: #fff;
			background-color: $color;
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-weight: 700;
			font-size: 36rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;
			}
	}
</style>
